<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all">
</head>

<body>
	<div class="layui-fluid main">
		<blockquote class="layui-elem-quote news_search">
			<div class="layui-btn-group">
			    <a href="http://127.0.0.1:8020/lc-csm/nrgl.html"><button class="layui-btn">增加</button></a>
			    <button class="layui-btn">批量删除</button>
		  	</div>
		</blockquote>
	</div>
	<div class="layui-fluid main">
		<table class="layui-table" lay-data="{url:'content-management.json', page:true, id:'test',height: 'full-100'}" lay-filter="test" id="test">
	        <thead>
	            <tr>
	            	<th lay-data="{type:'checkbox'}">ID</th>
	                <th lay-data="{field:'contentId', width:80, sort: true}">ID</th>
	                <th lay-data="{field:'appellation', width:80}">名称</th>
	                <th lay-data="{field:'ImageWidth', width:130, sort: true}">图片宽度</th>
	                <th lay-data="{templet: '#PicturHeightTpl',field:'author', width:130}">图片高度</th>
	                <th lay-data="{templet: '#HavePicturTpl',field:'state'}">有图片</th>
	                <th lay-data="{templet: '#disableTpl',field:'state', width:80}">禁用</th>
	                <th lay-data="{templet: '#OperatingOptions',type:'normal'}">操作选项</th>
	            </tr>
	        </thead>
	    </table>
	</div>
    
</body>

layer.confirm('纳尼？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

<!--数据表格模版-->
<script type="text/html" id="PicturHeightTpl">
	<span style="color: red;">{{d.author}}</span>
</script>
<script type="text/html" id="OperatingOptions">
	<div class="layui-btn-group">
    	<button style="background: #eaeaea; color:  #007ddb;" class="layui-btn layui-btn-sm">修改</button>
    	<button style="background: #eaeaea; color:  #007ddb;" class="layui-btn layui-btn-sm">删除</button>
  	</div>
</script>
<script type="text/html" id="HavePicturTpl">
	{{#  if(d.state == 0){ }}
    	否
  	{{#  } else { }}
   	是
 	 {{#  } }}
 <!-- <img src="{{d.cover}}" />-->
</script>
<script type="text/html" id="disableTpl">
  {{#  if(d.state == 0){ }}
    	否
  {{#  } else { }}
   	是
  {{#  } }}
</script>
<!--数据表格模版 end-->

<script src="../plugins/layui/layui.js"></script>
<script>
    layui.use('table', function() {
        var table = layui.table;
    });
</script>

</html>